scratchblocks-plus 1.0.1 → 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 +1 -1
- package/README.md +32 -21
- package/build/scratchblocks-plus.min.es.js +3 -3
- package/build/scratchblocks-plus.min.es.js.map +1 -1
- package/build/scratchblocks-plus.min.js +3 -3
- package/build/scratchblocks-plus.min.js.map +1 -1
- package/build/scratchblocks.min.es.js +9254 -0
- package/build/scratchblocks.min.es.js.map +1 -0
- package/build/scratchblocks.min.js +8925 -0
- package/build/scratchblocks.min.js.map +1 -0
- package/build/translations-all-es.js +2 -2
- package/build/translations-all-es.js.map +1 -1
- package/build/translations-all.js +2 -2
- package/build/translations-all.js.map +1 -1
- package/build/translations-es.js +2 -2
- package/build/translations-es.js.map +1 -1
- package/build/translations.js +2 -2
- package/build/translations.js.map +1 -1
- package/package.json +2 -2
- package/readme-assets/images/dark.png +0 -0
- package/readme-assets/images/light.png +0 -0
- package/syntax/model.js +10 -5
- package/syntax/syntax.js +6 -2
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
|
-
|
|
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://
|
|
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
|
|
@@ -53,15 +55,16 @@ Use the [scratchblocks-plus-react](https://github.com/LuYifei2011/scratchblocks-
|
|
|
53
55
|
You'll need to include a copy of the scratchblocks-plus JS file on your webpage.
|
|
54
56
|
There are a few ways of getting one:
|
|
55
57
|
|
|
56
|
-
|
|
58
|
+
- Download it from the <https://github.com/LuYifei2011/scratchblocks-plus/releases> page
|
|
57
59
|
<!--* If you have a fancy JS build system, you might like to include the `scratchblocks-plus` package from NPM-->
|
|
58
|
-
|
|
60
|
+
- You could clone this repository and build it yourself using Node 16.14.0+ (`npm run build`).
|
|
59
61
|
|
|
60
62
|
```html
|
|
61
63
|
<script src="scratchblocks-min.js"></script>
|
|
62
64
|
```
|
|
63
65
|
|
|
64
66
|
The convention is to write scratchblocks inside `pre` tags with the class `blocks`:
|
|
67
|
+
|
|
65
68
|
```html
|
|
66
69
|
<pre class="blocks">
|
|
67
70
|
when flag clicked
|
|
@@ -71,6 +74,7 @@ move (10) steps
|
|
|
71
74
|
|
|
72
75
|
You then need to call `scratchblocks.renderMatching` after the page has loaded.
|
|
73
76
|
Make sure this appears at the end of the page (just before the closing `</body>` tag):
|
|
77
|
+
|
|
74
78
|
```js
|
|
75
79
|
<script>
|
|
76
80
|
scratchblocks.renderMatching('pre.blocks', {
|
|
@@ -80,6 +84,7 @@ scratchblocks.renderMatching('pre.blocks', {
|
|
|
80
84
|
});
|
|
81
85
|
</script>
|
|
82
86
|
```
|
|
87
|
+
|
|
83
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`.
|
|
84
89
|
|
|
85
90
|
The `style` option controls how the blocks appear, either the Scratch 2 or Scratch 3 style is supported.
|
|
@@ -87,11 +92,13 @@ The `style` option controls how the blocks appear, either the Scratch 2 or Scrat
|
|
|
87
92
|
### Inline blocks
|
|
88
93
|
|
|
89
94
|
You might also want to use blocks "inline", inside a paragraph:
|
|
95
|
+
|
|
90
96
|
```html
|
|
91
97
|
I'm rather fond of the <code class="b">stamp</code> block in Scratch.
|
|
92
98
|
```
|
|
93
99
|
|
|
94
100
|
To allow this, make a second call to `renderMatching` using the `inline` argument.
|
|
101
|
+
|
|
95
102
|
```js
|
|
96
103
|
<script>
|
|
97
104
|
scratchblocks.renderMatching("pre.blocks", ...)
|
|
@@ -102,6 +109,7 @@ scratchblocks.renderMatching("code.b", {
|
|
|
102
109
|
});
|
|
103
110
|
</script>
|
|
104
111
|
```
|
|
112
|
+
|
|
105
113
|
This time we use `code.b` to target `code` blocks with the class `b`.
|
|
106
114
|
|
|
107
115
|
### Translations
|
|
@@ -109,12 +117,13 @@ This time we use `code.b` to target `code` blocks with the class `b`.
|
|
|
109
117
|
If you want to use languages other than English, you'll need to include a second JS file that contains translations.
|
|
110
118
|
The releases page includes two options; you can pick one:
|
|
111
119
|
|
|
112
|
-
|
|
113
|
-
|
|
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.
|
|
114
122
|
|
|
115
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.
|
|
116
124
|
|
|
117
125
|
For example, a translations file that just loads the German language (ISO code `de`) would look something like this:
|
|
126
|
+
|
|
118
127
|
```js
|
|
119
128
|
window.scratchblocks.loadLanguages({
|
|
120
129
|
de: <contents of locales/de.json>
|
|
@@ -123,6 +132,7 @@ window.scratchblocks.loadLanguages({
|
|
|
123
132
|
|
|
124
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.
|
|
125
134
|
This requires your bundler to allow importing JSON files as JavaScript.
|
|
135
|
+
|
|
126
136
|
```js
|
|
127
137
|
window.scratchblocks.loadLanguages({
|
|
128
138
|
de: require('scratchblocks/locales/de.json'),
|
|
@@ -143,6 +153,7 @@ scratchblocks.renderMatching('pre.blocks');
|
|
|
143
153
|
```
|
|
144
154
|
|
|
145
155
|
## ESM Support
|
|
156
|
+
|
|
146
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.
|
|
147
158
|
|
|
148
159
|
```js
|
|
@@ -156,6 +167,7 @@ loadTranslations(scratchblocks);
|
|
|
156
167
|
# Languages
|
|
157
168
|
|
|
158
169
|
To update the translations:
|
|
170
|
+
|
|
159
171
|
```sh
|
|
160
172
|
npm upgrade scratch-l10n
|
|
161
173
|
npm run locales
|
|
@@ -170,7 +182,7 @@ I'd be happy to accept pull requests for those! You'll need to rebuild the trans
|
|
|
170
182
|
|
|
171
183
|
This should set you up and start a http-server for development:
|
|
172
184
|
|
|
173
|
-
```
|
|
185
|
+
```sh
|
|
174
186
|
npm install
|
|
175
187
|
npm start
|
|
176
188
|
```
|
|
@@ -179,19 +191,18 @@ Then open <http://localhost:8000/> :-)
|
|
|
179
191
|
|
|
180
192
|
For more details, see [`CONTRIBUTING.md`](https://github.com/LuYifei2011/scratchblocks-plus/blob/master/.github/CONTRIBUTING.md).
|
|
181
193
|
|
|
182
|
-
|
|
183
194
|
# Credits
|
|
184
195
|
|
|
185
196
|
Many, many thanks to the [contributors](https://github.com/LuYifei2011/scratchblocks-plus/graphs/contributors)!
|
|
186
197
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
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)
|