Welcome to the repository of Scrap – the next version of Scrap, now as a desktop application.
As I firstly launched Scrap, the idea was to keep it as a progressive web app. However, despite being here so long, PWA
are still not user-familiar. So I chose Tauri to convert
Scrap into desktop app.
Scrap's been using bundled Babel.js to understand TypeScript code, which was not performant at all. I was thinking to include WebAssembly, but the fact not many browser support it discouraged me.
As Tauri provides with Rust back-end, and SWC is written in Rust, I just moved the parsing logic to Rust. I believe that native app deserves native performance.
So now I can code in Rust!
├── src
│ ├── app.ts
│ ├── main.ts
│ ├── utils
│ │ ├── types.ts
│ │ ├── data/
│ │ ├── plugins/
│ │ ├── fields/
│ │ ├── extensions/
│ │ └── blocks/
│ ├── typings
│ │ ├── static/
│ │ └── runtime/
│ ├── entity.ts
│ ├── code-transformers
│ │ ├── sb3.ts
│ │ ├── utils.ts
│ │ ├── codeToBlocks.ts
│ │ └── blocksToCode.ts
│ ├── assets/
│ ├── scss/
│ ├── scrap.d.ts
│ ├── monaco-editor/
│ └── components/
├── src-tauri
│ ├── src
│ │ ├── lib.rs
│ │ ├── visitor.rs
│ │ └── swc_utils.rs
│ ├── tauri.conf.json
│ └── capabilities/
├── eslint.config.js
├── index.html
└── tsconfig.json
You can download the latest version of Scrap from the Releases page. Note that the bundles aren't signed, but as you may check, they are virus-free.
You need to have Rust and Node.js installed. Also, make sure you have corepack enabled.
-
Clone the repository:
git clone https://github.com/tomaswrobel/scrap.git
-
Install the dependencies:
yarn
-
Generate icons:
yarn tauri icon src/assets/icon.svg --ios-color "#2fbf71" -
Build:
yarn tauri build
@scrap/*path is alias tosrc/directory. It's used in TypeScript files.
Scratch is an excellent platform for beginners to get started with programming, thanks to its visual drag-and-drop interface. However, transitioning from Scratch to text-based languages like JavaScript can be intimidating. Scrap aims to ease this transition by providing a set of tools, resources, and utilities that help Scratch users grasp the concepts of JavaScript more easily.
-
No VM or Interpreter - Scrap is a pure JavaScript application that runs in your web browser. Unlike Scratch, it doesn't require any VM or interpreter to run your code. The engine is powered by BlockLike.js, a JavaScript library that allows you to write Scratch-like code in JavaScript.
-
Block-Based Interface - Scrap's interface is block-based, just like Scratch. This makes it easier for Scratch users to get started with Scrap. The block-based interface is powered by Blockly.
-
Text-Based Code Editor - Scrap features a text-based code editor that allows you to write JavaScript code. The code editor is powered by Monaco Editor.
-
SB3 Support [incomplete] - Scrap supports the SB3 file format, which is the default file format used by Scratch 3.0. This allows you to import your Scratch projects into Scrap and continue working on them.
-
No Scratch's code in use - Although Scrap shares a visual resemblance with Scratch, it doesn't use any of Scratch's code. I know Scratch's code is open-source, but I didn't want to use it because I wanted to make Scrap a bit more unique.
-
Any platform - Scrap is a native application for Linux, Android, iOS, and Windows. Scrap has an web-app version too.
Scrap is still in its early stages of development.
-
More Blocks - Scrap currently supports only a limited number of blocks. More blocks will be added in the future to make Scrap more useful.
-
More Features - Scrap will be getting more features in the future, such as a better paint editor, and more.
-
More Resources - Scrap will be getting more resources in the future, such as tutorials, guides, and more.
-
Available on stores - Scrap will be available on the Microsoft Store, Google Play Store, and Apple App Store in the future.
-
Native App - Scrap no longer runs in the browser. It is now a native application for Linux, Android, iOS, and Windows. (Scrap v1)
-
Builtin code editor - Scrap now has a built-in code editor powered by Monaco Editor. It highlights syntax to be the same as blocks, provides autocompletion, checks for errors, and more. (Scrap 4)
-
Scratch Support - Scrap now supports SB3 files. You can import your Scratch projects into Scrap and continue working on them. (Scrap 3)
The logo for Scrap shares a visual resemblance with the Scratch logo as a deliberate homage. Here's what you need to know:
-
Font Choice: Scrap uses the "Black Boys on Mopeds" font, the same as Scratch's logo, which is freeware and freely usable – for non-commercial purposes.
-
No Copyright Infringement: Scrap respects copyright laws and does not infringe on Scratch's intellectual property. The similarity is a tribute, not a copy.
-
Non-Commercial: Scrap is a non-commercial project, and its logo is used to recognize Scratch's influence on its mission to help beginners transition from Scratch to JavaScript.
In essence, Scrap's logo is a respectful tribute to Scratch, complying with legal and ethical standards.
Scrap is released under the MIT License, which means you're free to use, modify, and distribute the project as long as you retain the original license terms.
Ready to make your transition from Scratch to JavaScript smoother? Scrap is here to assist you. Start exploring, experimenting, and learning with Scrap today! If you have any questions or need help, feel free to reach out to me in the Issues section.